<script setup lang="ts">
import { graphic } from 'echarts'
import useEcharts, { type EChartsOption } from '~/composables/chart'

import BlockHead from './block-head.vue'

import icon1 from './item-icon-3.png'

import icon2 from './item-icon-4.png'
import ItemSummaryInfo from './item-summary-info.vue'

defineOptions({
  name: 'ItemThree',
})

const props = defineProps<{
  value1: string | number
  value2: string | number
  value3: string | number
}>()

const { chartRef, setOption } = useEcharts()

const option = computed<EChartsOption>(() => {
  const max = 100
  return {
    series: [
      {
        type: 'gauge',
        startAngle: 230,
        endAngle: -50,
        min: 0,
        max,
        center: ['50%', '64%'],
        axisLine: {
          lineStyle: {
            width: 4,
            color: [[1, 'rgba(30, 194, 250, 1)']],
          },
        },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        radius: '70%',
      },
      {
        type: 'gauge',
        startAngle: 230,
        endAngle: -50,
        min: 0,
        max,
        center: ['50%', '64%'],
        axisLine: {
          lineStyle: {
            width: 4,
            shadowBlur: 2,
            shadowColor: 'rgba(46, 137, 250, 0.2)',
            color: [[1, 'rgba(46, 137, 250, 1)']],
          },
        },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        radius: '68%',
      },
      {
        type: 'gauge',
        startAngle: 230,
        endAngle: -50,
        min: 0,
        max,
        center: ['50%', '64%'],
        axisLine: {
          lineStyle: {
            width: 10,
            color: [[1, 'rgba(46, 139, 250, 0.2)']],
          },
        },
        radius: '67%',
        axisTick: {
          distance: 3,
          splitNumber: 2,
          lineStyle: {
            color: 'rgba(255,255,255,0.4)',
            width: 2,
          },
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: 'rgba(255,255,255,0.4)',
          distance: 2,
          fontSize: 10,
        },
        progress: {
          show: true,
          width: 30,
          itemStyle: {
            color: new graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: 'rgba(46, 137, 250, 0.5)' },
              { offset: 1, color: 'rgba(23, 230, 255, 0.5)' },
            ]),
          },
        },
        pointer: {
          length: '60%',
          width: 4,
          offsetCenter: [0, '-20%'],
          itemStyle: {
            color: 'white',
          },
        },
        data: [{ value: props.value1 ?? 0 }],
        detail: {
          show: true,
          fontSize: 12,
          color: '#17E6FF',
          offsetCenter: [0, '78%'],
          formatter: () => {
            return '设备开机率'
          },
        },
        title: { show: false },
      },
      {
        type: 'pie',
        radius: '30%',
        center: ['50%', '64%'],
        itemStyle: {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.59,
            colorStops: [
              { offset: 0, color: '#09162b' },
              { offset: 0.8, color: '#143969' },
              { offset: 0.85, color: '#2479cf' },
              { offset: 1, color: '#2479cf' },
            ],
          },
        },
        emphasis: {
          disabled: true,
        },
        data: [{ name: `${props.value1}`, value: 100 }],
        label: {
          position: 'center',
          formatter(params: any) {
            return `{name|${params.name}%}`
          },
          rich: {
            name: {
              fontSize: 20,
              fontFamily: 'PangMenZhengDao',
              fontWeight: 'normal',
              color: '#18def5',
            },
          },
        },
      },
    ],
  }
})

onMounted(() => {
  setOption(option.value)
})

watch([chartRef, option], () => {
  setOption(option.value)
})
</script>

<template>
  <div class="flex flex-col">
    <BlockHead title="设备运行状态" />
    <div class="block-body h-70 w-full flex-auto items-center">
      <div class="relative h-full w-full">
        <div ref="chartRef" style="width:100%;height:100%;" />
        <div class="gauge-tuo absolute bottom-1 left-0 right-0 h-4" />
        <div class="absolute left-4 right-4 top-3 flex items-center gap-2">
          <ItemSummaryInfo
            class="flex-1"
            :icon="icon1"
            is-vertical
            :data="{
              title: '设备总数',
              value: value2,
              unit: '台',
            }"
          />
          <ItemSummaryInfo
            class="flex-1"
            :icon="icon2"
            is-vertical
            :data="{
              title: '当前运行设备',
              value: value3,
              unit: '台',
            }"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.gauge-tuo {
  background: url('./item-one-gauge-tuo.png') no-repeat center center;
  background-size: auto 100%;
}
</style>
